<template>
    <el-divider/>
    <div class="patientNum">
        <div>
            <el-tag class="ml-2" type="success">今日已看{{ lookedNum }}人</el-tag>
        </div>
        <div>
            <el-tag class="ml-2" type="warning">当前有{{ waitNum }}人在排队</el-tag>
        </div>
    </div>

    <el-divider/>
    <el-icon>
        <DocumentChecked/>
    </el-icon>
    <span>
  患者叫号
    </span>
    <el-divider/>
    <div class="patientSearch">
        <div>
            <el-input v-model="searchInfo.caseNumber" placeholder="请输入患者病历号"/>
        </div>
        <div>
            <el-input v-model="searchInfo.realName" placeholder="请输入患者姓名"/>
        </div>
        <div>
            <el-button @click="queryPatientByCondition">搜索</el-button>
        </div>
    </div>
    <el-divider/>
    <el-table :data="waitList" stripe table-layout="auto">
        <el-table-column label="患者病历号">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.caseNumber }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="患者姓名">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.realName }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="性别">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.gender }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="年龄">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.age }}</span>
                    <span style="margin-left: 10px">{{ scope.row.ageType }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="病历本">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-left: 10px">{{ scope.row.isBook }}</span>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="patientAddCase(scope.row)">创建病历</el-button>
                <el-button size="small">跳过</el-button>
                <el-button size="small">叫号</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-divider/>
    <div class="demo-pagination-block">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[2,4,10]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="waitNum"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"/>
    </div>
</template>

<script setup>
import {provide, ref} from "vue";
import {DocumentChecked} from '@element-plus/icons-vue'
import axios from "axios";
import router from "../../router/index.js";

axios.defaults.baseURL = "http://localhost:8092/"
provide("axios", axios)
const currentPage = ref(1)

const pageSize = ref(2)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const loginEmp = ref({
    id: '1',
    realname: '扁鹊',
})
//已经查看过的患者数量
const lookedNum = ref(0)
//等待叫号的患者列表
const waitList = ref([])
const waitNum = ref(0)
//根据当前医生查找患者信息列表
const patientInfoList = ref([])
const searchInfo = ref({
    caseNumber: '',
    realName: ''
})
//查询当前医生全部患者列表
axios({
    method: 'get',
    url: 'register/queryPatientByDoc/' + loginEmp.value.id
}).then(resp => {
    patientInfoList.value = resp.data.data
    patientInfoList.value.forEach(patientInfo => {
        if (patientInfo.visitState == 3) {
            lookedNum.value += 1
        }
        if (patientInfo.visitState == 1) {
            waitNum.value += 1
        }
    })
})
axios({
    method: "get",
    url: 'register/queryPatientByDocPage/' + loginEmp.value.id + '/' + currentPage.value + '/' + pageSize.value
}).then(resp => {
    waitList.value = resp.data.data
})

function handleCurrentChange() {
    axios({
        method: "get",
        url: 'register/queryPatientByDocPage/' + loginEmp.value.id + '/' + currentPage.value + '/' + pageSize.value
    }).then(resp => {
        waitList.value = resp.data.data
    })
}

function handleSizeChange() {
    axios({
        method: "get",
        url: 'register/queryPatientByDocPage/' + loginEmp.value.id + '/' + currentPage.value + '/' + pageSize.value
    }).then(resp => {
        waitList.value = resp.data.data
    })
}

function queryPatientByCondition() {
    axios({
        method: 'post',
        url: 'register/queryPatientByCondition/' + loginEmp.value.id,
        data: searchInfo.value
    }).then(resp => {
        waitList.value = resp.data.data
    })
}

//点击创建病历功能
function patientAddCase(val) {
    //改变患者就诊状态
    axios({
        method: 'get',
        url: 'register/updatePatientState/' + val.caseNumber
    }).then(resp => {
        if (resp.data.success) {
            //路由跳转到病历首页
            router.push({
                path: '/home_medical_record',
                query: {caseNumber: val.caseNumber}
            })
        }
    })
}
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.patientSearch {
    display: flex;
}

.patientSearch div {
    margin: 0 1vw 0 1vw;
}

.demo-pagination-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.patientNum {
    display: flex;
}

.patientNum div {
    margin: 0 1vw;
}
</style>